/*
 * @Author: your name
 * @Date: 2020-07-16 23:43:12
 * @LastEditTime: 2021-07-31 23:54:15
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \ts\react_app\src\todo_list.js
 */

 import React, { Component,Fragment } from 'react'
 //import {Input,Button,List} from 'antd'
 import TodoListUi from './todoListUi'
 import {changtodeInputValue_action,addTodo_action,getTodoList_action_fn} from './store/action_function'
 //import axios from 'axios'
 import store from './store/index'
 import 'antd/dist/antd.css'

import MyContext from './myContext'

 export default class TodoList extends Component {
   constructor(props){
      console.log(store.getState())
      super(props)
      this.state = store.getState().todeReducer
      this.changeInputValue = this.changeInputValue.bind(this)
      this.storeChange = this.storeChange.bind(this)
      this.addTodo = this.addTodo.bind(this)

      store.subscribe(this.storeChange)
   }

   componentDidMount(){
     //axios.get('')
     store.dispatch(getTodoList_action_fn())
   }

   changeInputValue(e){
      store.dispatch(changtodeInputValue_action(e.target.value))
   }

   storeChange(){
     this.setState(store.getState().todeReducer)
   }
   addTodo(){
    store.dispatch(addTodo_action(this.state.inputValue))
   }
   static contextType = MyContext

   render() {

     return (
       <Fragment>
         <MyContext.Consumer>
           {
             ({title, toggleTheme}) => (
               <div>
                <div>{title}</div>
                <button  onClick={()=>{toggleTheme("新的值")}}>
                  Toggle titlr
                </button>
              </div>
            )
           }
         </MyContext.Consumer>
        <TodoListUi
            inputValue={this.state.inputValue} changeInputValue={this.changeInputValue}
            addTodo={this.addTodo} todoList={this.state.todoList}
          >
        </TodoListUi>
       </Fragment>
     )
   }
 }
